<template>
    <div style="background: #EBEBEB;position: fixed;top:0;left:0;right:0;bottom: 0;">
        <header class="resviseTop">
            <img src="../../images/left.png" alt="" onClick="javascript :history.back(-1);">
            <span class="resvise_title">邀请列表</span>
        </header>
        <!--<div class="mutlist" style="overflow-y: scroll;" :style="{ height: screen }">-->
        <!--<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="false" ref="loadmore"-->
        <!--:bottom-all-loaded="allLoaded">-->
        <!--&lt;!&ndash;<div>&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="record_box" v-for="arr in tasks">&ndash;&gt;-->
        <!--&lt;!&ndash;<p class="record_money" :class="{ red: arr.transaction_flow != 1 }"><span v-if="arr.transaction_type">{{ arr.transaction_type.text }}</span><i v-if="arr.transaction_flow == 1">+{{arr.transaction_amount}}</i><i v-else>-{{arr.transaction_amount}}</i>&ndash;&gt;-->
        <!--&lt;!&ndash;</p>&ndash;&gt;-->
        <!--&lt;!&ndash;<p class="record_title" v-if="arr.transaction_meta">{{arr.transaction_meta.meta_value}}</p>&ndash;&gt;-->
        <!--&lt;!&ndash;<p class="record_data">{{arr.transaction_date}}</p>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--</mt-loadmore>-->
        <!--</div>-->
        <div class="header-tab">
            <ul>
                <li v-for="(tabs, index) in headerTab" @click="types(tabs.type, index)" :class="{on: headerInx == index}"><p>
                    {{ tabs.text }}</p></li>
            </ul>
        </div>
        <div class="mutlist" style="overflow-y: scroll;" :style="{ height: screen }">
            <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="false" ref="loadmore"
                         :bottom-all-loaded="allLoaded">
                <div class="InviteList">
                    <ul>
                        <li class="clearfix" v-for="list in inviteList">
                            <img :src="list.user_avatar" alt="" class="headImg">
                            <div class="InviteUser">
                                <h3>{{ list.mobile }}</h3>
                                <p>{{ list.qq }}</p>
                                <p><em>+{{ list.amount }}</em><i>{{ getLocalTime(list.user_registered) }}</i></p>
                                <img src="../../images/statusIcon.png" alt="" class="statusIcon" @click="$toast(list.amount == 0? '未激活': '已激活')">
                            </div>
                        </li>
                    </ul>
                </div>
            </mt-loadmore>
        </div>
        </div>
</template>

<script>
    import api from '../../utils/api';

    export default {
        name: "Moneyrecord",
        data: () => ({
            ifrecord: 0,
            tasks: [],
            allLoaded: false,
            screen: 0,
            page: 0,
            url: '',
            type: 2,
            headerTab: [{
                text: '邀请徒弟',
                type: 2
            }, {
                text: '邀请商家',
                type: 1
            }],
            headerInx: 0,
            inviteList: []
        }),
        created() {
            this.loadTop()
            this.screen = 17 + 'rem';
        },
        methods: {
            loadBottom() {
                api.request('/inviteList', 'get', {
                    page: this.page + 1,
                    group: this.type
                }).then((resp) => {
                    var arr = []
                    arr = resp.data.data
                    console.log(arr)
                    if (arr.length >= 1) {
                        this.page = this.page + 1;
                        this.inviteList = this.inviteList.concat(arr);
                        this.$refs.loadmore.onBottomLoaded();
                    } else {
                        this.$refs.loadmore.onBottomLoaded();
                    }

                })
            },
            loadTop() {
                api.request('/inviteList', 'get', {page: 0, group: this.type}).then((resp) => {
                    var arr = [];
                    arr = resp.data.data
                    this.inviteList = [];
                    this.page = 0;
                    this.inviteList = arr;
                    this.$refs.loadmore.onTopLoaded();
                })
            },
            types(type, index) {
                this.headerInx = index;
                this.type = type;
                this.loadTop()
            },
            getLocalTime(nS) {
                return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
            }
        }
    }
</script>

<style scoped="css">
    @import "../../style/moneyrecord.css";
</style>
